<template>
    <el-container class="main-container" :direction=VERTICAL>
        <div class="self_title">整体趋势</div>
        <el-row :gutter="20">
            <el-col class="base_bg" :span="12" >
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-space direction="vertical" alignment="flex-start">
                            <div>新增用户</div>
                            <div class="data-font">96</div>
                            <div><span>同比</span><span class="percent">72%</span></div>
                        </el-space>
                    </el-col>
                    <el-col :span="12">
                        <el-space direction="vertical" alignment="flex-start">
                            <div>活跃用户</div>
                            <div class="data-font">3，266</div>
                            <div><span>同比</span><span class="percent">72%</span></div>
                        </el-space>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-space direction="vertical" alignment="flex-start">
                            <div>新增用户留存率</div>
                            <div class="data-font">34%</div>
                            <div><span>同比</span><span class="percent">72%</span></div>
                        </el-space>
                    </el-col>
                    <el-col :span="12">
                        <el-space direction="vertical" alignment="flex-start">
                            <div>日使用时长</div>
                            <div class="data-font">1h</div>
                            <div><span>同比</span><span class="percent">72%</span></div>
                        </el-space>
                    </el-col>
                </el-row>
            </el-col>
            <el-col class="base_bg" :span="12">
                <el-row>
                    <el-col :span="12">
                        <el-space direction="vertical" alignment="flex-start">
                            <div>周活跃用户</div>
                            <div class="data-font">8999</div>
                            <div><span>同比</span><span class="percent">72%</span></div>
                        </el-space>
                    </el-col>
                    <el-col :span="12">
                        <el-space direction="vertical" alignment="flex-start">
                                <div>月总活跃用户</div>
                                <div class="data-font">12，333</div>
                                <div><span>同比</span><span class="percent">72%</span></div>
                        </el-space>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <div class="time-table">
            <el-row :align="middle">
                <el-col :span="3">
                    <div class="self_title">用户数据统计</div>
                </el-col>
                <el-col :span="6">
                    <DatePicker></DatePicker>
                </el-col>
            </el-row>
            <DataChart></DataChart>
        </div>
    </el-container>
</template>

<script setup>
import DatePicker from '@/components/DatePicker.vue'
import DataChart from '@/components/DataChart.vue'
import { VERTICAL } from 'element-plus/es/components/virtual-list/src/defaults';
</script>

<style>
.self_title {
    font-weight: bolder;
    font-size: large;
}

.el-row {
    margin: 20px 0;
}

.main-container {
    padding: 20px 20px;
}

.data-font {
    font-weight: bold;
}

span {
    margin: 0 5px 0 0;
}

.percent {
    color: red;
    font-weight: 600;
}
</style>